import { PageContainer } from "@ant-design/pro-components";
import { Flex, Image } from "antd";
import { FC } from "react";
import { connect } from "umi";
import styles from "./index.less";
const Welcome: FC<any> = (props) => {
  const { user } = props;
  function sayGreeting() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    if (hours >= 0 && hours < 6) {
      return "早上好";
    } else if (hours >= 6 && hours < 11) {
      return "上午好";
    } else if (hours === 11 && minutes < 30) {
      return "上午好";
    } else if (
      (hours === 11 && minutes >= 30) ||
      (hours === 12 && minutes < 60)
    ) {
      return "中午好";
    } else if (hours >= 14 && hours < 17) {
      return "下午好";
    } else if (hours === 17 && minutes < 30) {
      return "下午好";
    } else {
      return "晚上好";
    }
  }
  const text = sayGreeting();
  return (
    <PageContainer title="控制台">
      <div className={styles.WelcomeBox}>
        <Flex gap={24}>
          <div>
            <Image
              style={{ width: "56px" }}
              src={
                user?.avatar ||
                "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg"
              }
            ></Image>
          </div>
          <div className={styles.user}>
            <div className={styles.userName}>
              {user?.nickName},{text}!
            </div>
            <div className={styles.userRole}>
              {user &&
                user.roles &&
                user.roles.length > 0 &&
                user.roles.map((item, index) => (
                  <span>
                    {index > 0 ? "、" : ""}
                    {item.roleName}
                  </span>
                ))}
            </div>
          </div>
        </Flex>
      </div>
    </PageContainer>
  );
};
export default connect(({ global }) => ({
  ...global,
}))(Welcome);
